@import "../common/global";

.bbq-switch {
  position: relative;
  width: 40px;
  height: 20px;
  border: 1px solid $disableColor;
  box-sizing: border-box;
  background: $disableColor;
  cursor: pointer;
  transition: border-color .3s,background-color .3s;
  &.round {
    border-radius: 15px;
    &::after {
      border-radius: 15px;
    }
  }
  &::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    transition: all .3s;
    width: 16px;
    height: 16px;
    background-color: #fff;
  }
  //开启状态的after
  &.is-open::after {
    left: 21px
  }

  &.is-open {
    border: 1px solid $normalThemeColor;
    background: $normalThemeColor;
  }
}